<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        h4,
        h5,
        h6 {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #eeeeee;
            margin-top: 0;
        }

        /* 通栏 */
        #top {
            height: 50px;
            box-shadow: 0 0 2px #888888;
        }

        /* 留言标题 */
        #title {
            width: 600px;
            height: 70px;
            background-color: white;
            margin: 0 auto;
            padding: 10px 10px;
            box-shadow: 0 0 2px #888888;
        }

        .title_input {
            margin-top: 15px;
            width: 590px;
            height: 20px;
            border: 2px solid transparent;
            border-bottom: 1px solid black;
        }

        /* 留言内容 */
        #content {
            width: 600px;
            height: 160px;
            background-color: white;
            margin: 20px auto;
            padding: 10px 10px;
            box-shadow: 0 0 2px #888888;

        }

        .content_textarea {
            margin-top: 15px;
            width: 590px;
            height: 110px;
            border: 2px solid transparent;
            border-bottom: 1px solid #000;
        }

        /* 提交按钮 */
        .sub_button {
            width: 160px;
            height: 20px;
            margin: 20px auto;
            text-align: center;
            border-radius: 4px;
            font-size: 12px;
            color: #fff;
        }

        /* 留言显示 */
        .show_msg {
            width: 620px;
            margin: 10px auto 0;
            background-color: #fff;
            display: flex;
            flex-direction: column;
        }

        ul {
            list-style: none;
            padding: 0;
            font-size: 12px;
        }

        .title {
            color: #000;
            padding: 10px 5px 5px 5px;
        }

        .content {
            color: #939393;
            padding: 0 8px;
        }

        .date {
            text-align: right;
            margin-right: 5px;
        }

        .error {
            color: red;
            font-size: 10px;
        }
    </style>
    <script src="js/jquery3.7.1.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="js/jquery.validate.regex.js"></script>
    <script>
        $(function () {
            $("#myForm").validate({
                errorElement: 'div',  // 使用div来显示错误信息
                errorPlacement: function (error, element) {
                    // 将错误信息放置在输入字段的旁边
                    error.insertBefore(element);
                },
                rules: {
                    title: {
                        required: true,
                        regex: /^\w{4,20}$/,
                        // equalTo:#ddd, //第二次输入密码
                        // remote: // ajax验证用户名是否存在
                    },
                    content: {
                        required: true,
                    },
                },
                messages: {
                    title: {
                        required: "标题不能为空",
                        regex: "标题不符合要求！"
                    },
                    content: {
                        required: "留言内容不能为空",
                    },
                },
                submitHandler: function (form) {
                    //ajax提交
                    // $.post("http://localhost:3000/messages",{"title":$("input[name='title']").val(),"content":"","createTime":new Date()},function (data){
                    //     console.log(data)
                    // });

                    const data = {
                        title: $("input[name='title']").val(),
                        content: $(".content_textarea").val(),
                        createTime: new Date()
                    };
                    fetch('http://localhost:3000/messages', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(data)
                    })
                        .then(response => response.json())
                        .then(data => {
                            console.log('Success:', data)
                            $("input[name='title']").val('')
                            $(".content_textarea").val('')
                        })
                        .catch((error) => console.error('Error:', error));
                }





            })

            $("#page span:first-child").click(function (){
                if(params._page === 1){
                    return
                }
                params._page--;
                getData()
            });

            $("#page span:last-child").click(function (){
                params._page++;
                getData()
            });

            //jquery操作ajax获得数据
            // $.get("http://localhost:3000/messages",{"_page":1,"_limit":2},function (data){
            //     console.log(data)
            // });
            let params = {_sort: "id", _order: "desc", _page: 1, _limit: 3}

            let template = $(` <ul>
                <li style="margin:10px 10px 0 0; float: right;">#{{message.id}}</li>
                <li class="title">{{message.title}}</li>
                <li class="content">{{message.content}}</li>
                <li class="date">{{message.createTime}}</li>
                </ul>`)

            //ajax获得留言信息列表
            let getData = () =>{
                const queryString = new URLSearchParams(params).toString();
                fetch(`http://localhost:3000/messages?${queryString}`)
                    .then(response => {
                        return response.json();
                    })
                    .then(data => {
                        console.log(data)
                        //倒序 展示数据
                        if(data.length === 0){
                            params._page--;
                            return
                        }
                        $(".show_msg").empty()
                        data.forEach(function (item,index){
                            let newNode = template.clone(true);
                            newNode.children().eq(0).html(item.id)
                            newNode.children().eq(1).html(item.title)
                            newNode.children().eq(2).html(item.content)
                            newNode.children().eq(3).html(item.createTime)
                            $(".show_msg").append(newNode)
                        })
                    })
            }

            getData()
        })
    </script>
</head>

<body>
<div id="app">
    <form id="myForm">
        <!-- 通栏 -->
        <div id="top" style="background-color:#4ba6ee"></div>
        <!-- 留言标题 -->
        <div id="title"><input type="color" name="topColor" style="float: right;">
            <h4>留言标题</h4>

            <input name="title" class="title_input" type="text" placeholder="给我们来点建议吧"/>
        </div>
        <!-- 留言内容 -->
        <div id="content">
            <h4>留言内容</h4>

            <textarea class="content_textarea" name="content"></textarea>
        </div>
        <div id="page" style="float: right; font-size: 12px; margin-right: 400px;">
            <span style="margin-right: 10px;">上一页</span><span>下一页</span></div>
        <!-- 提交按钮 -->
        <div class="sub_button" style="background-color:#4ba6ee" @click="submit()"><input type="submit"></div>

    </form>

    <!-- 显示留言 -->
    <div class="show_msg">

    </div>
</div>
</body>

</html>
